<template>
	<div id="user-profile">
		<van-form @submit="onSubmit">
			<van-field label="用户" v-model="userForm.id" type="text" readonly />
			<van-field label="用户" v-model="userForm.name" type="text" placeholder="请输入用户" :rules="[{ pattern: regNamePwd, required: true, message: '无效用户名' }]" />
			<van-field label="邮箱" v-model="userForm.email" type="email" placeholder="请输入邮箱" :rules="[{ pattern: regEmail, message: '无效邮箱' }]" />
			<van-field label="电话" v-model="userForm.phone" type="tel" placeholder="请输入电话" :rules="[{ pattern: regPhone, message: '无效手机号码' }]" />
			<van-field name="radio" label="性别">
				<template #input>
					<van-radio-group v-model="userForm.gender" direction="horizontal">
						<van-radio :name="1">男</van-radio>
						<van-radio :name="0">女</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field label="昵称" v-model="userForm.nick_name" type="text" placeholder="请输入昵称"></van-field>
			<van-field name="uploader" label="头像">
				<template #input>
					<van-uploader name="avatar" v-model="avatarList" :max-count="1" :after-read="afterRead" />
				</template>
			</van-field>
			<div style="margin: 16px;"><van-button round block type="info" native-type="submit">提交</van-button></div>
		</van-form>
	</div>
</template>

<script>
import { getDetailByIdAPI, updateAPI, uploadAvatarAPI } from '@/api/user.js';
import { getUserLocal } from '@/utils/auth.js';

export default {
	data() {
		return {
			userForm: {
				//表单中的字段名与数据库中用户表的字段名要求一致
				id: null,
				name: '',
				email: '',
				phone: '',
				gender: 1,
				avatar: '',
				nick_name: '',
			},

			avatarList: [],
			//规则:字母数字‘6~12
			regNamePwd: /^[a-z0-9]{3,12}$/i,
			regPhone: /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/,
			regEmail: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
		};
	},

	created() {
		let id = getUserLocal().id;
		getDetailByIdAPI(id).then(result => {
			this.userForm = result.data;
			this.avatarList = [];
			this.avatarList.push({
				url: this.APIDomainName + this.userForm.avatar
			});
		});
	},

	methods: {
		//手动处理文件上传
		afterRead(file, detail) {			
			file.status = 'uploading';
			file.message = '上传中...';
			uploadAvatarAPI(file, detail).then(result => {
				file.status = '';
				file.message = '';
				//重新生成显示的图片url
				this.avatarList = [];
				this.avatarList.push({
					url: this.APIDomainName + result.url
				});

				//设置用户表中的字段值
				this.userForm.avatar = result.url;
			});
		},

		//处理提交保存
		onSubmit() {
			//注意传递过去的参数user的属性名
			let user = this.userForm;
			updateAPI(user).then(() => {
				this.$toast('更新成功！');
				this.$router.push({
					name: 'user'
				});
			});
		}
	}
};
</script>

<style lang="less" scoped></style>
